<template>
    <div class="LiSt">
        <ul class="list" v-if="JSON.stringify(listData) != '[]'">
            <li
                v-for="(item, index) in listData"
                :key="index"
                :class="
                    item.type2 == 0 ? 'ui1' : item.type2 == 1 ? 'ui2' : 'ui4'
                "
                :style="item.type2 == 2 ? 'margin:0;' : ''"
                @click="
                    switch (type) {
                        case 'Zhuanti':
                            $router.push({
                                path: '/ZhuantiDetail',
                                query: { id: item.id },
                            });
                            break;
                        case 'active':
                            $router.push({
                                path: '/ActiveDetial',
                                query: { id: item.id },
                            });
                            break;
                        default:
                            $router.push({
                                path: '/Detial',
                                query: { id: item.id },
                            });
                            break;
                    }
                "
            >
                <dl v-if="item.type2 == 0">
                    <dd
                        :class="
                            searchType == 'api/auth_users/dong_jian'
                                ? 'activeClacc'
                                : ''
                        "
                    >
                        <img
                            :src="item.cover_image_url"
                            @error="errorImage(item.id)"
                            draggable="false"
                            alt=""
                        />
                    </dd>
                    <dt
                        :style="
                            searchType == 'api/auth_users/dong_jian'
                                ? 'width:666px;'
                                : ''
                        "
                    >
                        <h1 class="li_title">
                            <span
                                class="tuijian"
                                v-if="item.is_recommend && li_id != 'recommend'"
                                ><i>推荐</i></span
                            >
                            <span
                                v-if="
                                    item.is_original && !item.is_first_publish
                                "
                                ><i>原创</i></span
                            >
                            <span v-if="item.is_first_publish"
                                ><i>首发</i></span
                            >

                            <h6 v-html="item.title"></h6>
                        </h1>
                        <p>{{ item.article_desc }}</p>
                        <ol class="li_tag" v-if="item.article_key_words">
                            <i
                                v-for="(
                                    itemr, index
                                ) in item.article_key_words.split(' ')"
                                :key="index"
                                >{{ itemr }}</i
                            >
                        </ol>
                        <div class="li_time">
                            <div>
                                <h2 v-if="item.user">
                                    {{ item.user.nickname }}
                                </h2>
                                <h3>{{ item.publish_time_desc }}</h3>
                            </div>
                            <div
                                v-if="
                                    item.view_count ||
                                    item.comment_count ||
                                    item.comment_count == 0 ||
                                    item.view_count == 0
                                "
                            >
                                <h4
                                    v-if="
                                        item.view_count || item.view_count == 0
                                    "
                                >
                                    <img
                                        src="../assets/img/i_icon_chakan.png"
                                        alt=""
                                    />
                                    <span>{{ item.view_count }}</span>
                                </h4>
                                <h4
                                    v-if="
                                        item.comment_count ||
                                        item.comment_count == 0
                                    "
                                >
                                    <img
                                        src="../assets/img/i_icon_pinglun.png"
                                        alt=""
                                        style="margin-top: 1px"
                                    />
                                    <span>{{ item.comment_count }}</span>
                                </h4>
                            </div>
                        </div>
                    </dt>
                </dl>

                <div v-if="item.type2 == 1">
                    <h1 class="li_title">
                        <span
                            class="tuijian"
                            v-if="item.is_recommend && li_id != 'recommend'"
                            ><i>推荐</i></span
                        >
                        <span v-if="item.is_original && !item.is_first_publish"
                            ><i>原创</i></span
                        >
                        <span v-if="item.is_first_publish"><i>首发</i></span>

                        <h6 v-html="item.title"></h6>
                    </h1>
                    <ol class="li_tag" v-if="item.article_key_words">
                        <i
                            v-for="(
                                itemr, index
                            ) in item.article_key_words.split(' ')"
                            :key="index"
                            >{{ itemr }}</i
                        >
                    </ol>
                    <div class="li_time">
                        <div>
                            <h2 v-if="item.user">{{ item.user.nickname }}</h2>
                            <h3>{{ item.publish_time_desc }}</h3>
                        </div>
                        <div
                            v-if="
                                item.view_count ||
                                item.comment_count ||
                                item.comment_count == 0 ||
                                item.view_count == 0
                            "
                        >
                            <h4 v-if="item.view_count || item.view_count == 0">
                                <img
                                    src="../assets/img/i_icon_chakan.png"
                                    alt=""
                                />
                                <span>{{ item.view_count }}</span>
                            </h4>
                            <h4
                                v-if="
                                    item.comment_count ||
                                    item.comment_count == 0
                                "
                            >
                                <img
                                    src="../assets/img/i_icon_pinglun.png"
                                    alt=""
                                    style="margin-top: 1px"
                                />
                                <span>{{ item.comment_count }}</span>
                            </h4>
                        </div>
                    </div>
                </div>

                <dl v-if="item.type2 == 2">
                    <dd>
                        <img :src="item.cover_image_url" alt="" />
                    </dd>
                    <dt>
                        <h1>
                            <div>
                                <!-- <span v-if="item.is_original"><i>原创</i></span>
                                <span v-if="item.is_first_publish"
                                    ><i>首发</i></span
                                > -->
                                <span class="tuijian" v-if="item.is_recommend"
                                    ><i>推荐</i></span
                                >
                                <b>{{ item.title }}</b>
                            </div>
                            <h2 v-show="type != 'active'">
                                新更新<span>{{ item.update_count }}</span
                                >篇/<span>{{ item.article_count }}</span
                                >篇文章
                            </h2>
                        </h1>

                        <p>
                            {{ item.subject_desc }}
                        </p>

                        <ol class="li_tag" v-if="item.subject_key_words">
                            <i
                                v-for="(
                                    itemr, indexe
                                ) in item.subject_key_words.split(' ')"
                                :key="indexe"
                                >{{ itemr }}</i
                            >
                        </ol>

                        <div class="li_time">
                            <div>
                                <h5 v-if="item.user">
                                    <img :src="item.user.avatar_url" alt="" />
                                </h5>
                                <h2 v-if="item.user">
                                    {{ item.user.identity_name }}
                                </h2>
                                <h3>{{ item.created_at }}</h3>
                            </div>
                            <div
                                v-if="
                                    item.view_count ||
                                    item.comment_count ||
                                    item.comment_count == 0 ||
                                    item.view_count == 0
                                "
                            >
                                <h4
                                    v-if="
                                        item.view_count || item.view_count == 0
                                    "
                                >
                                    <img
                                        src="../assets/img/i_icon_chakan.png"
                                        alt=""
                                    />
                                    <span>{{ item.view_count }}</span>
                                </h4>
                                <h4
                                    v-if="
                                        item.comment_count ||
                                        item.comment_count == 0
                                    "
                                >
                                    <img
                                        src="../assets/img/i_icon_pinglun.png"
                                        alt=""
                                        style="margin-top: 1px"
                                    />
                                    <span>{{ item.comment_count }}</span>
                                </h4>
                            </div>
                        </div>
                    </dt>
                </dl>
            </li>
        </ul>

        <div class="load" v-if="!detialId">
            <span>{{ has_more_Text }}</span>
        </div>
        <!-- <List :type="'detail'" :detialId="info.id" :detialChannelId='info.channel_id' /> -->
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
import { axiosGet } from '../server/axios';
export default {
    name: 'LiSt',
    props: [
        'type',
        'li_type',
        'li_id',
        'order_by_desc',
        'searchVal',
        'searchClick',
        'searchType',
        'id',
        'detialId',
        'detialChannelId',
    ],
    data() {
        return {
            listData: [],
            page: 1,
            limit: 20,

            // 分页缓冲
            pageState: true,
            has_more_Text: '正在加载',

            // 专题
            state_zt: '',
            info: {},
            url: '',
        };
    },
    watch: {
        li_id: 'list_reload',
        li_type: 'list_reload',
        order_by_desc: 'list_reload',
        type: 'list_reload',
        searchClick: 'list_reload',
        $route: 'getPath',
        searchType: 'list_reload',
    },
    mounted() {
        this.getPath();

        // if (this.type == 'index') {
        //     this.list_reload();
        // }
        if (this.type != 'hostlist') {
            this.list_reload();
        }

        // if (
        //     this.type != 'hostlist' &&
        //     this.type != 'Zhuanti' &&
        //     this.type != 'active'
        // ) {
        //     this.list_reload();
        // }

        window.addEventListener('scroll', this.handleScroll, true); // 监听（绑定）滚轮滚动事件
    },
    methods: {
        // 监听路有变化
        ...mapMutations(['changeIs_gotop', 'changeSliderScroll']),

        getPath() {},
        list_reloadSearch() {
            this.info = {
                page: this.page,
                limit: this.limit,
                keyword: this.searchVal,
            };
            this.url = this.searchType;
            this.listData = [];
            this.page = 1;
            this.getChannelList();
        },
        list_reload() {
            switch (this.type) {
                case 'index':
                    this.info = {
                        limit: this.limit,
                        channel_id: this.li_id,
                        subject_id: this.id,
                    };
                    this.url = 'api/articles';
                    break;
                case 'hostlist':
                    this.info = {
                        limit: this.limit,
                        order_by_desc: this.order_by_desc,
                    };
                    this.url = 'api/articles';
                    break;
                case 'Zhuanti':
                    this.info = {
                        limit: this.limit,
                    };
                    this.url = 'api/subjects';
                    break;
                case 'active':
                    this.info = {
                        limit: this.limit,
                    };
                    this.url = 'api/activities';
                    break;
                case 'search':
                    this.info = {
                        limit: this.limit,
                        keyword: this.searchVal,
                    };
                    this.url = this.searchType;
                    break;
                case 'detail':
                    this.info = {
                        limit: 10,
                        filter_channel_id: this.detialChannelId,
                        acticle_id: this.detialId,
                    };
                    this.url = 'api/articles';
                    break;
                default:
                    break;
            }
            this.listData = [];
            this.page = 1;
            this.getChannelList();
        },
        errorImage(id) {
            this.listData.map((item) => {
                if (item.id == id) {
                    item.type2 = 1;
                }
            });
        },
        // 滚动事件
        handleScroll() {
            if (this.detialId) {
                return;
            }
            let clientHeight =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            let offsetTop =
                document.documentElement.scrollHeight ||
                document.body.scrollHeight;
            // 设备/屏幕高度
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop; // 滚动条偏移量
            // 滚动条到底部的条件
            if (scrollTop > window.innerHeight) {
                this.changeIs_gotop(true);
            } else {
                this.changeIs_gotop(false);
            }
            if (
                document.getElementById('scrolltoper') &&
                scrollTop >
                    document.getElementById('scrolltoper').offsetTop -
                        window.innerHeight +
                        40 +
                        10
            ) {
                this.changeSliderScroll(true);
            } else {
                this.changeSliderScroll(false);
            }

            if (
                clientHeight + scrollTop >= offsetTop - 10 &&
                this.pageState &&
                this.has_more_Text == '正在加载' &&
                scrollTop > 500
            ) {
                this.pageState = false;
                this.page++;
                this.getChannelList();
            }
        },
        setAvatarBase64(src, callback) {
            let _this = this;
            let image = new Image();
            // 处理缓存
            image.src = src + '?v=' + Math.random();
            // 支持跨域图片
            image.crossOrigin = '*';
            image.onload = function () {
                let base64 = _this.transBase64FromImage(image);
                callback && callback(base64);
            };
        },
        // 将网络图片转换成base64格式
        transBase64FromImage(image) {
            console.log(image);
            let canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0, image.width, image.height);
            // 可选其他值 image/jpeg
            return canvas.toDataURL('image/png');
        },
        // 频道相关
        // order_by_desc
        getChannelList() {
            this.info.page = this.page;
            axiosGet(this.url, this.info, (res) => {
                this.pageState = true;
                if (res.code != 'ok') {
                    this.$notify({
                        title: '警告',
                        message: res.msg,
                        type: 'warning',
                    });
                }
                if (res.data.has_more) {
                    this.has_more_Text = '正在加载';
                } else {
                    if (this.type == 'search') {
                        this.has_more_Text = '暂无搜索结果';
                    } else {
                        this.has_more_Text = '暂无更多';
                    }
                }

                res.data.list.map((item) => {
                    item.type2 = 0;
                    if (this.searchType == 'api/auth_users/dong_jian') {
                        item.cover_image_url =
                            item.avatar_url ||
                            require('../assets/img/defaultavatar.png');

                        item.title = item.nickname;
                        item.article_desc = item.identity_name;
                    }
                    if (!item.cover_image_url) {
                        item.cover_image_url = 'aaa';
                    }
                    if (this.type == 'Zhuanti' || this.type == 'active') {
                        item.type2 = 2;
                    }
                    if (item.title) {
                        item.title = item.title.replace(
                            this.searchVal,
                            `<span class="red">${this.searchVal}</span>`
                        );
                    }
                    this.listData.push(item);
                });
                // this.listData.map((item) => {
                //     this.setAvatarBase64(item.cover_image_url, (base64) => {
                //         console.log(base64);
                //     });
                // });

                // this.bannerlist = res.data;
                // this.initBanner(); cover_image_url
            });
        },
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll, true); //  离开页面清除（移除）滚轮滚动事件
    },
};
</script>
<style scoped lang="scss">
.LiSt {
    overflow: hidden;
    min-height: 500px;
}

.list {
    li {
        margin: 0 20px;
        padding: 18px 0;
        border-bottom: 2px solid #f6f6f6;
        cursor: pointer;
    }
    .li_time {
        font-size: 12px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #a7a7a7;
        margin-top: 7px;
        padding: 0 2px;
        overflow: hidden;
        line-height: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
            display: flex;
            justify-content: flex-start;
        }

        h5 {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin-right: 5px;
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        h2,
        h3 {
            margin-right: 9px;
        }

        h4 {
            display: flex;
            align-items: center;
            margin-left: 9px;

            img {
                margin-right: 3px;
            }
        }
    }
    .li_tag {
        overflow: hidden;
        margin-top: 16px;
        i {
            height: 20px;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 12px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #a7a7a7;
            padding: 4px 9px;
            float: left;
            margin-right: 4px;
            margin-bottom: 5px;
        }
    }
    .li_title {
        display: flex;
        align-items: center;
        height: 30px;

        span {
            background: #f4f4f5;
            border: 1px solid #cbcccf;
            border-radius: 4px;
            padding: 1.5px 8.5px;
            margin-right: 5px;

            i {
                white-space: nowrap;
            }
        }
        .tuijian {
            width: 40px;
            height: 20px;
            background: linear-gradient(-90deg, #fd6403 0%, #e60012 100%);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #ffffff;
            border: 0;
            padding: 0;
        }
        h6 {
            width: 450px;
            font-size: 20px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        h6:hover {
            color: #e60012;
        }
    }

    .ui1 {
        dl {
            display: flex;
            justify-content: space-between;
            .activeClacc {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                overflow: hidden;

                img {
                    width: 100%;
                }
            }
            dd {
                width: 215px;
                max-height: 142px;
                overflow: hidden;

                img {
                    width: 100%;
                    transition: all 1s;
                }
                img:hover {
                    transform: scale(1.2);
                }
            }

            dt {
                width: 500px;
                position: relative;
                padding-bottom: 26px;

                p {
                    font-size: 13px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #787878;
                    line-height: 18px;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    margin-top: 6px;
                    word-break: break-all;
                }

                .li_time {
                    position: absolute;
                    bottom: 0;
                }
            }
        }
    }
    .ui2 {
        h1 {
            h6 {
                width: 690px;
                color: #262626;
            }
        }
    }
    .ui3 {
        h1 {
            h6 {
                width: 690px;
                color: #262626;
                margin-left: 0;
            }
        }
        ol {
            margin: 17px 0;
            overflow: hidden;
            div {
                width: 233px;
                max-height: 142px;
                float: left;
                margin-right: 10px;
                overflow: hidden;
                img {
                    width: 100%;
                    transition: all 1s;
                }
                img:hover {
                    transform: scale(1.2);
                }
            }
        }
    }

    .ui4 {
        dl {
            dd {
                width: 770px;
                overflow: hidden;

                img {
                    width: 100%;
                }
            }
            dt {
                padding: 10px;
                h1 {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    div {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        span {
                            background: #f4f4f5;
                            border: 1px solid #cbcccf;
                            border-radius: 4px;
                            padding: 1.5px 8.5px;
                            margin-right: 5px;

                            i {
                                white-space: nowrap;
                            }
                        }
                        .tuijian {
                            width: 40px;
                            height: 20px;
                            background: linear-gradient(
                                -90deg,
                                #fd6403 0%,
                                #e60012 100%
                            );
                            border-radius: 4px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 12px;
                            font-family: Source Han Sans SC VF;
                            font-weight: 400;
                            color: #ffffff;
                            border: 0;
                            padding: 0;
                        }
                        // span {
                        //     width: 40px;
                        //     height: 20px;
                        //     background: linear-gradient(
                        //         -90deg,
                        //         #fd6403 0%,
                        //         #e60012 100%
                        //     );
                        //     border-radius: 4px;
                        //     display: flex;
                        //     align-items: center;
                        //     justify-content: center;
                        //     font-size: 12px;
                        //     font-family: Source Han Sans SC VF;
                        //     font-weight: 400;
                        //     color: #ffffff;
                        // }

                        b {
                            font-size: 20px;
                            font-family: Source Han Sans SC VF;
                            font-weight: 400;
                            color: #262626;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            max-width: 500px;
                            margin-left: 5px;
                        }
                    }

                    h2 {
                        font-size: 13px;
                        font-family: Source Han Sans SC VF;
                        font-weight: 400;
                        color: #787878;
                    }
                }

                p {
                    font-size: 13px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #787878;
                    line-height: 18px;
                    margin-top: 10px;
                }
            }
        }
    }
}
</style>
